<template>
  <div id="app">
    <div>
      <h2>商品详情</h2>
    </div>
    <el-divider></el-divider>
    <div class="content-box">
      <div>
        <el-image src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
                  class="image">
          <div slot="placeholder" class="image-slot">
            加载中<span class="dot">...</span>
          </div>
        </el-image>
      </div>
      <div class="sku-box">
        <div class="sku-name">
          3CE 丝绒哑光持久唇釉唇彩#GOING RIGHT 蜜桃南瓜色 4克/支 雾面哑光 丝绒质感
        </div>
        <div class="price-wrap">
          <div class="p-box">
            <span style="margin-left: 5px">价格：</span>
            <div class="price">
              <span>￥199.99</span>
            </div>
          </div>
          <div class="p-box">
            <span style="margin-left: 5px">累计评价：</span>
            <div class="evaluate">
              <span>100908</span>
            </div>
          </div>
        </div>
        <el-divider></el-divider>
        <div class="specs-box">
          <span>选择规格：</span>
          <div style="width: 100%">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </div>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <div class="info-box">
      <el-descriptions title="商品介绍">
        <el-descriptions-item label="商品编号">kooriookami</el-descriptions-item>
        <el-descriptions-item label="品牌">kooriookami</el-descriptions-item>
        <el-descriptions-item label="商家">18100000000</el-descriptions-item>
        <el-descriptions-item label="所属类别">苏州市</el-descriptions-item>
      </el-descriptions>
    </div>
  </div>
</template>

<script>
import {getParams} from "@/utils/tools";

export default {
  name: "App",
  data() {
    return {
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      value: ''
    };
  },
  methods: {

  },
  mounted() {
    console.log(decodeURIComponent(getParams('obj')))
  }
};
</script>

<style>
#app {
  width: 100%;
  height: 100%;
  display: block;
  font-family: "Avenir", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

.content-box {
  width: 800px;
  display: flex;
  margin: 50px auto 0;
}

a {
  text-decoration: none;
}

a:hover {
  color: blue;
  cursor: pointer;
}

.image {
  width: 300px;
  height: 300px;
  display: block;
}

.sku-box {
  margin-left: 30px;
  width: 100%
}

.sku-name {
  font-family: Arial, "microsoft yahei", serif;
  font-size: 16px;
  font-weight: 700;
  color: #475669;
  text-align: left;
}

.price-wrap {
  width: 100%;
  text-align: left;
  margin-top: 20px;
  background-color: #f3f3f3;
  font-size: 12px;
  font-family: simsun, serif;
  line-height: 40px;
  color: #9b9b9b;
}

.p-box {
  display: flex;
}

.price {
  color: #e4393c;
  font-family: microsoft yahei, serif;
  font-size: 18px;
}

.evaluate {
  color: #005ea7;
  font-family: verdana, serif;
  font-size: 18px;
}

.specs-box {
  margin-top: 20px;
  text-align: left;
  font-size: 12px;
  font-family: simsun, serif;
  line-height: 40px;
  color: #9b9b9b;
}

.info-box {
  width: 800px;
  margin: 30px auto 0;
}

</style>
